<template>
<div id="app">
  <!-- 导航 -->
  <div id="nav">
    <ul class="nav-list">
      <li>Vue</li>
      <li>
        <router-link to="/">首页</router-link>
      </li>
      <li>
        <router-link to="/about">关于我们</router-link>
      </li>
      <li class="user">
        <div class="dropdown">
          <router-link to="/user">账户中心</router-link>
          <!-- 必须点击下拉箭头才显示二级路由列表 -->
          <span class="iconfont icon--shanglajiantou" v-show="flag" @click="flag = false"></span>
          <span class="iconfont icon--xialajiantou" v-show="!flag" @click="flag = true"></span>
        </div>
        <!-- 二级路由 -->
        <div :class="['dropdown-menu', flag ? 'show' : '']" @click="flag = false">
          <router-link to="/user/pass">密码管理</router-link><br />
          <router-link to="/user/order">订单管理</router-link>
          <!-- 
              /user/pass
              pass组件的内容一定是显示在user的router-view位置
             -->
        </div>
      </li>
      <li>
        <router-link to="/login">登录</router-link>
      </li>
      <li>
        <router-link to="/news">新闻</router-link>
      </li>
    </ul>
  </div>
  <div id="nav1">
    <div class="btn-list">
      <button @click="goHome">goHome</button>
      <button @click="goList">goList</button>
      <button @click="go1">前进</button>
      <button @click="go_1">后退</button>
      <button @click="go2">前进2步</button>
      <button @click="go_2">后退2步</button>
    </div>
  </div>
  <!-- 导航视图 -->
  <div class="content">
    <router-view />
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      //判断dropdown-menu是否显示
      flag: false
    }
  },
  methods: {
    //去首页的函数
    goHome() {
      //1、直接使用路径字符串
      //this.$router.push('/home')
      //2、直接使用replace替换路径，上一页会被覆盖，无法返回
      this.$router.replace('/home')
      //3、使用对象
      //this.$router.push({ path: '/home' })
      //4、使用路由名称
      //this.$router.push({ name: 'Login' })
      //5、带参数
      //6、带查询参数!!!!
      //this.$router.push({ path: '/home/tom', query: { id: 100 } })
    },
    //去列表页的函数
    goList() {
      this.$router.push('/list')
    },
    go1() {
      this.$router.go(1)
    },
    go2() {
      this.$router.go(2)
    },
    go_1() {
      this.$router.go(-1)
    },
    go_2() {
      this.$router.go(-2)
    }
  }
}
</script>

<style lang="less">
#app {
  width: 800px;
  margin: 0 auto;

  #nav1 {
    margin-bottom: 15px;

    .btn-list {
      padding: 10px;

      button {
        margin: 5px;
        padding: 5px;
      }
    }
  }

  #nav {
    border-radius: 5px;
    background-color: #f8f8f8;

    .nav-list {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      list-style: none;
      padding: 10px;

      li {
        padding: 0 15px;
        // border: 1px solid black;
      }

      .user {
        position: relative;

        .dropdown-menu {
          display: none;
          box-sizing: border-box;
          position: absolute;
          border: 1px solid #ddd;
          height: 100px;
          width: 100%;
          left: 0;
          padding: 10px;
          z-index: 999;
          background-color: #fff;
        }

        .show {
          display: block;
        }
      }
    }

    a {
      color: #a3a3a5;
      text-decoration: none;

      &.router-link-exact-active {
        color: #42b983;
      }
    }
  }

  .content {
    padding: 20px;
    border-radius: 5px;
    background-color: #eeeeee;
  }
}
</style>
